﻿<article class="col-xs-12">
    <div class="jarviswidget" id="wid-id-editskill-addskill-0">
        <header>
            <span class="widget-icon"> <i class="fa fa-plus-square"></i> </span>
            <h2>Add Skill</h2>
        </header>
        <div>
            <div class="widget-body no-padding">
                <form class="smart-form" id="addSkillForm">
                    <input type="hidden" value="" id="SkillParentId" name="SkillParentId" />
                    <fieldset>
                        <section>
                            <label class="label">Skill Name</label>
                            <label class="input">
                                <input type="text" maxlength="50" name="SkillName">
                            </label>
                            <div class="note">
                                <strong>Maxlength</strong> 50 characters.
                            </div>
                        </section>

                        <section>
                            <label class="label">Skill Description</label>
                            <label class="textarea textarea-expandable">
                                <textarea rows="3" class="custom-scroll" name="SkillDescription"></textarea>
                            </label>
                            <div class="note">
                                <strong>Note:</strong> This paragraph will be displayed below the skill name.
                            </div>
                        </section>
                    </fieldset>

                    <footer>
                        <button class="btn btn-primary" id="addSkillFormSubmit">
                            Submit
                        </button>
                    </footer>
                </form>
            </div>
        </div>
    </div>
</article>

<script>
    $("#addSkillFormSubmit").click(function () {
        $.ajax({
            url: apiUrl + "Skill/AddSkill",
            data: $("#addSkillForm").serialize(),
            success: function (data) {
                if (data.status.code == 0) {
                    reflashSkill();
                    $.smallBox({
                        title: "Success",
                        content: "<i class='fa fa-clock-o'></i> <i></i>Skill has been inserted",
                        color: "#659265",
                        iconSmall: "fa fa-check fa-2x fadeInRight animated",
                        timeout: 8000
                    });
                } else {
                    alert(data.status.msg);
                }
            }
        });
        return false;
    })

</script>